<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室-群组聊天</title>
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <link href="/dist/plugins/ztreem/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <style>
        .chat_main {
            float: left;
            width: 548px;
            height: 546px;
            border: 1px solid seagreen;
            /*background-color: white;*/
            background-size: cover;
        }

        .send_message {
            width: 548px;
            height: 65px;
            position: absolute;
            bottom: 0px;
            background: linear-gradient(to top, rgba(9, 216, 237, 0.99), #72cad4);
        }

        .send_message input[type="text"] {
            width: 470px;
            height: 30px;
            margin-top: 16px;
            margin-left: 10px;
            border-radius: 10px 0 0 10px;
            text-indent: 2em;
            outline: none;
            background-color: white;
            border: none;
        }

        .send_message input[type="button"] {
            border-radius: 0 10px 10px 0;
            width: 35px;
            height: 30px;
            background-color: white;
            border: none;
            margin-left: 0;
            background-color: white;
            border: none;
            outline: none;

        }

        .send_message input[type="button"]:hover {
            background-color: orangered;
        }

        .send_message input[type="button"]:active {
            background-color: #879eee;
        }

        .chat_content ul {
            list-style-type: none;
        }

        .chat_content {
            overflow: auto;
            width: 540px;
            /*设置高度滚动条才有效*/
            height: 470px;
        }

        .chat_content li {
            margin-top: 30px;
            width: 540px;
            clear: both;
            display: block;

        }

        .chat_content li img {
            margin: 6px 0 0 0;
        }

        .chat_content li span {
            background: #ffd351;
            padding: 10px;
            border-radius: 10px;
            /*最大宽度不能太长，不然布局会混乱*/
            max-width: 400px;
            border: 1px solid white;
            box-shadow: 0 0 3px #879eee;
            margin: 6px 10px 0 10px;
            overflow: hidden;
        }

        .chat_content li img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        .chat_content li img.imgleft {
            margin-left: 10px;
            float: left;
        }

        .chat_content li img.imgright {
            margin-right: 10px;
            float: right;
        }

        .chat_content li span.spanleft {
            float: left;
        }

        .chat_content li span.spanright {
            float: right;
        }

        .chatRoom {
            display: none;
        }

    </style>
</head>

<body>
<section class="content" id="app">
    <div class="col-md-12" id="divAll">
        <div class="col-md-2">
            <div class="box-body no-padding box-border iframeH" style="overflow: auto;background: #f7f8fa;">
                <ul class="ztree" id="ulGroupCompanyDepartRole"></ul>
                <input type="button" value="加入群聊" @click="btnSave" class="btn oaBtn btn-sm"
                       style="margin-top:10px;">
            </div>
        </div>
        <div class="col-md-6">
            <div class="chat_main box-body no-padding box-border iframeH" style="overflow: auto;background: #f7f8fa;">
                <div class="chat_div">
                    <ul id="chat_ul" class="chat_content">
                        <li v-for="(item,i) in msgList"><span>{{item}}</span></li>
                    </ul>

                </div>
                <div class="send_message">
                    <div>
                        <input id="sendMsg" type="text" placeholder="请输入消息" v-model="msgBody" @keyup.enter="doSendUser">
                        <input type="button" @click="doSendUser" value="发送">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="box-body no-padding box-border iframeH2"
                 style="overflow: auto;background: #f7f8fa;">
                <ul class="ztree" id="ulTemplate"></ul>
            </div>
        </div>
    </div>
    <div class="chatRoom">
        <div class="loginDh"><img src="/dist/img/loading/loading-spinner-blue.gif" alt=""></div>
        <table class="table-detail" style="width: 400px;">
            <tr>
                <td class="td-title" style="width:25%;">群组名称</td>
                <td class="td-tanZongStyle" style="width:25%;">
                    <input type="text" class="text-left " style="width: 100%; border: 0px;" id="chatRoomName">
                </td>
            </tr>

        </table>
        <div class="south no-print" style="height:50px;line-height:50px;text-align:center;">
            <input type="button" value="保存" id="saveChat" class="btn oaBtn btn-sm" style="margin-left: 10px;">
        </div>
    </div>
</section>
</body>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=558d0414"></script>
<script type="text/javascript" src="/dist/plugins/ztreem/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="/dist/plugins/ztreem/js/jquery.ztree.exedit-3.5.js"></script>
<script type="text/javascript" src="/dist/plugins/ztreem/js/jquery.ztree.exhide-3.5.js"></script>
<script type="text/javascript" src="/dist/plugins/ztreem/js/jquery.ztree.excheck-3.5.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="/dist/plugins/select2/select2.full.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript" src="/dist/js/pages/sock/sockjs-0.3.min.js"></script>
<script>
    var websocket = null;
    // 首先判断是否 支持 WebSocket
    if ('WebSocket' in window) {
        if (server.ip.indexOf("https") > -1) {
            websocket = new WebSocket("ws://" + server.ip.replace("https:\/\/", '') + "/websocket");
        } else {
            websocket = new WebSocket("ws://" + server.ip.replace("http:\/\/", '') + "/websocket");
        }
    } else if ('MozWebSocket' in window) {
        if (server.ip.indexOf("https") > -1) {
            websocket = new MozWebSocket("ws://+ server.ip.replace(\"https:\\/\\/\",'') +/websocket");
        } else {
            websocket = new MozWebSocket("ws://+ server.ip.replace(\"http:\\/\\/\",'') +/websocket");
        }

    } else {
        if (server.ip.indexOf("https") > -1) {
            websocket = new SockJS("https://+ server.ip.replace(\"https:\\/\\/\",'') +/sockjs/websocket");
        } else {
            websocket = new SockJS("http://+ server.ip.replace(\"http:\\/\\/\",'') +/sockjs/websocket");
        }

    }
    websocket.onopen = onOpen;
    websocket.onmessage = onMessage;
    websocket.onerror = onError;
    websocket.onclose = onClose;

    function onOpen(openEvt) {
        alert(openEvt.Data);
    }

    function onMessage(evt) {
        var josn = JSON.parse(evt.data);
        var josnObject = josn.data.sendData;
        console.log("群组id"+josnObject[0].groupId);
        if (app.groupId==josnObject[0].groupId) {
            app.msgList.push(josnObject[0].userName + ":  " + josnObject[0].msgBody);
        }
    }
    function onOpen() {
    }

    function onError() {
    }

    function onClose() {
    }

    window.close = function () {
        websocket.onclose();
    }

</script>
<script type="text/javascript">
    var zTreeCallback = {
        showIcon: function (treeId, treeNode) {
            return treeNode.type != "user";
        },
        onClick: function (event, treeId, treeNode) {
            isLoad = true;
            switch (treeNode.type) {
                case 'root':
                    break;
                case 'company':
                    break;
                case 'depart':
                    break;
                case "region":
                case "chat":
                    app.groupId=treeNode.id;
                    app.getByGroupId();
                    break;
                case "group":
                    break;
                case 'user':
                    app.receiverId = treeNode.id;
                    app.receiverName = treeNode.name;
                    break;
                case 'member':
                    break;
                default :
                    break;
            }
        },
        onRightClick: function (event, treeId, treeNode) {
            app.treeObj.selectNode(treeNode);
            $("#menu").children().hide();
            var showMenu = false;
            if (treeNode) {
                switch (treeNode.type) {
                    case "root":
                        $("#addGroup").show();
                        showMenu = true;
                        break;
                    case "group":
                        $("#addGroup,#addUser,#rename,#removeGroup").show();
                        showMenu = true;
                        break;
                    case "user":
                        var parentNode = treeNode.getParentNode();
                        if (parentNode.type == 'group') {
                            $("#removeUser").show();
                            showMenu = true;
                            break;
                        }
                    default:
                        break;
                }
                if (showMenu) {
                    $('#menu').menu('show', {
                        left: event.clientX,
                        top: event.clientY
                    });
                }
            }
        },
        beforeRename: function (treeId, treeNode, newName, isCancel) {

        },
        beforeDrag: function (treeId, treeNodes) {
            if (treeNodes[0].type != "group") {
                return false;
            }
        },
        beforeDrop: function (treeId, treeNodes, targetNode, moveType) {
            var toType = targetNode.type;
            if (moveType == "inner" || toType != "group") {
                return false;
            }
        },
        onDrop: function (event, treeId, treeNodes, targetNode, moveType, isCopy) {

        }
    };
    var zTreeSetting = {
        view: {
            showIcon: zTreeCallback.showIcon
        },
        data: {
            simpleData: {
                enable: true
            },
            keep: {
                parent: true
            }
        },
        check: {
            chkboxType: {"Y": "p", "N": "s"},
            enable: true
        },
        edit: {
            enable: true,
            showRemoveBtn: false,
            showRenameBtn: false,
            editNameSelectAll: true,
            drag: {
                isCopy: false,
                isMove: true,
                prev: true,
                next: true,
                inner: true
            }
        },
        callback: {
            onClick: zTreeCallback.onClick,
            onRightClick: zTreeCallback.onRightClick,
            beforeDrag: zTreeCallback.beforeDrag,
            beforeDrop: zTreeCallback.beforeDrop,
            beforeRename: zTreeCallback.beforeRename,
            onDrop: zTreeCallback.onDrop
        }
    };
    var zTreeChatSetting = {
        view: {
            showIcon: zTreeCallback.showIcon
        },
        data: {
            simpleData: {
                enable: true
            },
            keep: {
                parent: true
            }
        },
        edit: {
            enable: true,
            showRemoveBtn: false,
            showRenameBtn: false,
            editNameSelectAll: true,
            drag: {
                isCopy: false,
                isMove: true,
                prev: true,
                next: true,
                inner: true
            }
        },
        callback: {
            onClick: zTreeCallback.onClick,
            onRightClick: zTreeCallback.onRightClick,
            beforeDrag: zTreeCallback.beforeDrag,
            beforeDrop: zTreeCallback.beforeDrop,
            beforeRename: zTreeCallback.beforeRename,
            onDrop: zTreeCallback.onDrop
        }
    };
    var app = new Vue({
        el: '#app',
        data: {
            treeNodes: [],
            treeObj: null,
            zTreeTemplate: null,
            msgList: [],
            receiverId: '',
            receiverName: '',
            msgBody: '',
            chatRoomName: '',
            userId: getCurrentUser().id,
            userName: getCurrentUser().name,
            groupId: '',
            memberIds: [],
            memberNames: []
        },
        methods: {
            getOrgNodes: function (callback) {
                $.ajax({
                    url: server.ip + "/email/getOrgInbox.json",
                    data: JSON.stringify({
                        userId: getCurrentUser().id
                    }),
                    success: function (r) {
                        callback(r.data.sendData);

                    }
                });
            },
            btnSave: function () {
                top.$.dialog({
                    id: 'openModel',
                    content: $('.chatRoom').html(),
                    title: "创建群组",
                    width: 400,
                    height: 100,
                    max: false,
                    min: false,
                    lock: true
                });
                var that = this;
                var memberIds = new Array();
                var memberNames = new Array();
                var rightNodes = that.treeObj.getCheckedNodes(true);
                for (var i = 0; i < rightNodes.length; i++) {
                    if (rightNodes[i].type == "user") {
                        memberIds.push(rightNodes[i].id);
                        memberNames.push(rightNodes[i].name);
                    }
                }
                top.$("body").delegate("#saveChat", "click", function () {
                    var chatRoomName = top.$("#chatRoomName").val();
                    that.chatRoomName = chatRoomName;
                    $.wyui.postMethod("/chatRoom/saveGroup.json", {
                        "memberIds": memberIds.join(","),
                        "memberNames": memberNames.join(","),
                        "chatRoomName": chatRoomName,
                        "userId": getCurrentUser().id,
                        "userName": getCurrentUser().name
                    }, function (data) {
                        alert("保存成功");
                        top.$.dialog({id: 'openModel'}).close();
                        $.wyui.postMethod("/chatRoom/getTreeNodes.json", {userId:getCurrentUser().id}, function (nodes) {
                            that.zTreeTemplate = $.fn.zTree.init($("#ulTemplate"), zTreeChatSetting, nodes);
                        });
                    });
                })
            },
            doSendUser: function () {
                var that = this;
                var obj = {
                    userId: that.userId,
                    userName: that.userName,
                    msgBody: that.msgBody,
                    groupId: that.groupId
                };
                if (that.msgBody == "") {
                    alert("请输入聊天内容!")
                } else {
                    $.wyui.postMethod("/chatRoom/save.json", obj, function (data) {
                        that.msgBody = "";
                    });
                }
            },
            getByGroupId: function () {
                var that = this;
                $("#chat_ul").empty();
                $.wyui.postMethod("/chatRoom/getByGroupId.json", {"groupId":that.groupId}, function (data) {
                    if(data!=null&&data.length>0){
                        for (var i = 0; i < data.length; i++) {
                            that.msgList.push(data[i].userName + ":  " + data[i].msgBody)
                        }
                    }
                });
            },
        },
        mounted: function () {
            var that = this;
            that.getOrgNodes(function (nodes) {
                that.treeObj = $.fn.zTree.init($("#ulGroupCompanyDepartRole"), zTreeSetting, nodes);
            });
            $.wyui.postMethod("/chatRoom/getTreeNodes.json", {userId:getCurrentUser().id}, function (nodes) {
                that.zTreeTemplate = $.fn.zTree.init($("#ulTemplate"), zTreeChatSetting, nodes);
            });
        }
    });
</script>

</html>